<!DOCTYPE html>
<html>
	<head>
		<title> 电流曲线</title>
		<meta http-equiv='content-type' content='text/html; charset=UTF-8'/>
		<script type="text/javascript" src="../../js/head.js"></script>
		<script type="text/javascript" src="../../js/ope/curve.head.js"></script>
		<script type="text/javascript">
			// 当前操作的指示器
			var currObj = null;
			// 定时器
			var TIME_OUT;
			// 操作的上一个指示器对象
			var LAST_INDICATOR;
			// 导出超时时间，单位分钟
			var EXPORT_TIME_OUT = 3;
			// 文档加载完后初始化（创建台账树、调整布局使之满屏、绑定部分事件）
			$(document).on("pageinit", function(event) {

				// 初始化日期
				initDate();

				// 绑定导出和方法
				$("#exportbtn").unbind().bind("click", function() {

					try {
						var beginDate = $("#begindate").val();
						if (0 == beginDate.trim().length) {
							showMsg("起始日期不能为空!");
							return;
						} else {
							beginDate += " 00:00:00";
						}

						var endDate = $("#enddate").val();
						if (0 == endDate.trim().length) {
							showMsg("结束日期不能为空!");
							return;
						} else {
							endDate += " 23:59:59";
						}
						$("#exportbtn").button("disable");

						TIME_OUT = setTimeout(function() {

							var msg = "导出电流数据超时, 请重试!";
							showMsg(msg, 10000);
							addLog(msg);

							$("#exportbtn").button("enable");
						}, EXPORT_TIME_OUT * 60 * 1000);
						window.loadcurrentjsi.exportLoadCurrents(beginDate, endDate);
					} catch(e) {
					}
				});

				// 绑定曲线分析方法
				$("#analysisbtn").unbind().bind("tap", function() {

					var beginDate = $("#begindate").val();
					if (0 == beginDate.trim().length) {
						showMsg("起始日期不能为空!");
						return;
					} else {
						beginDate += " 00:00:00";
					}

					var endDate = $("#enddate").val();
					if (0 == endDate.trim().length) {
						showMsg("结束日期不能为空!");
						return;
					} else {
						endDate += " 23:59:59";
					}

					analysisCurve(beginDate, endDate);
				});

				// 绑定曲线分析方法
				$("#fanalysisbtn").unbind().bind("tap", function() {
					var beginDate = $("#fbegindate").val();
					if (0 == beginDate.trim().length) {
						showMsg("起始日期不能为空!");
						return;
					} else {
						beginDate += " 00:00:00";
					}

					var endDate = $("#fenddate").val();
					if (0 == endDate.trim().length) {
						showMsg("结束日期不能为空!");
						return;
					} else {
						endDate += " 23:59:59";
					}

					analysisCurve(beginDate, endDate);
				});

				// 关闭提示
				$("#tipclosediv").unbind().bind("tap", function() {
					$("#tipdiv").hide(2000);
				});

				// 动态获取台账树
				try {
					window.indicatorjsi.queryIndicators("");
				} catch (e) {
				}

				// 调整布局
				adjustLayout();

				// 判断是否加载串口，如果需要与串口通信的模块都需要加此段
				try {
					window.debugjsi.isUSBAttached();
				} catch(e) {
				}

				// 增删改按钮绑定事件
				$("#addbtn", $("#popupmenu")).unbind("tap").bind("tap", add);
				$("#modifybtn", $("#popupmenu")).unbind("tap").bind("tap", modify);
				$("#removebtn", $("#popupmenu")).unbind("tap").bind("tap", remove);
			});

			/**
			 * 动态加载台账树的回调方法，显示台账树，并对树上的节点动态绑定方法（长按和点击事件）
			 */
			var loadIndicators = function(data) {

				var indicatorTree = "";
				for (var k = 0; k < data.length; k++) {
					var indicatorObj = data[k];
					var phase = indicatorObj.phase;
					var phaseText = phase == 1 ? "A 相" : (phase == 2 ? "B 相" : "C 相");
					indicatorTree += '<li id="indicator_' + indicatorObj._id + '" class="custom-indicator">' + indicatorObj.indicatoraddr + '( <font color=\'red\'>' + phaseText + '</font> )</li>';
				}

				// 拼接、创建台账树，并刷新
				$("#indicatorlist").html(indicatorTree);
				$("#indicatorlist").trigger('create').listview("refresh");

				// 打开实施方案panel
				$("#showarchive").panel("open");

				// 长按指示器的标题，弹出操作对话框
				$(".custom-igroup").unbind("taphold").bind("taphold", function(event) {

					$("a", $("#popupmenu")).show();
					// 隐藏修改按钮和删除按钮
					$("#modifybtn", $("#popupmenu")).css({
						"display" : "none"
					});
					$("#removebtn", $("#popupmenu")).css({
						"display" : "none"
					});

					showPopup(this);
					return false;
				});

				// 长按指示器，弹出操作对话框
				$(".custom-indicator").unbind("taphold").bind("taphold", function(event) {

					$("a", $("#popupmenu")).show();
					// 隐藏新增按钮
					$("#addbtn", $("#popupmenu")).css({
						"display" : "none"
					});

					showPopup(this);
					return false;
				});

				// 点击台账树上的指示器
				$(".custom-indicator").unbind("click").bind("click", function(event) {

					if (null != $(LAST_INDICATOR)) {
						$(LAST_INDICATOR).removeClass("ui-btn-up-e");
						$(LAST_INDICATOR).addClass("ui-btn-up-c");
					}

					currObj = this;
					LAST_INDICATOR = this;
					$(this).removeClass("ui-btn-up-c");
					$(this).addClass("ui-btn-up-e");

					// 向后台请求svg文件
					try {
						var indicatorId = $(this).attr("id").split("_")[1];
						window.indicatorjsi.getIndicator(indicatorId);
					} catch(e) {
					}
				});

				//数据采集按钮绑定方法
				$("#acqdatabtn").unbind().bind("tap", collectData);
			};

			//初始化绑定iScroll控件
			document.addEventListener('DOMContentLoaded', loaded, false);
		</script>
		<style>
			.jGrowl .jGrowl-closer, .jGrowl .jGrowl-notification {
				text-shadow: 0 -1px 0 #000;
			}
			.custom-indicator, .custom-igroup {
				cursor: pointer;
			}

			#showarchive .ui-panel-inner {
				padding: 0px;
				z-index: 10;
			}

			#indicatorpopup a {
				width: 105px;
			}

			#maindiv, #curvediv {
				display: none;
				width: 100%;
				margin: 20px;
			}

			#tipdiv {
				background-color: #000;
				opacity: .85;
				-ms-filter: "alpha(Opacity=85)";
				filter: alpha(Opacity=85);
				text-align: left;
				display: none;
				color: #fff;
				margin: -20px;
				padding-left: 20px;
				padding-right: 20px;
				margin-bottom: 10px;
				height: 60px;
				line-height: 60px;
				text-shadow: 0 -1px 0 #000;
			}

			.table-margin-20 {
				margin: 20px;
				margin-top: 0px;
				padding-right: 40px;
			}

			.close {
				width: 32px;
				margin-top: -3px;
				margin-right: 22px;
				height: 32px;
				float: right;
				background: url(../../image/window-close.png) no-repeat 0px 0px;
			}
		</style>
	</head>
	<body>
		<div data-role="page" id="curvepage" data-dom-cache="true">

			<!-- 指示器编辑对话框 -->
			<a href="#indicatorpopup" id="triggerindicatorpopup" data-rel="popup" data-role="button" style="display: none;"></a>
			<div data-role="popup" id="indicatorpopup" data-transition="flip" data-position-to="window" data-dismissible="false"
			data-overlay-theme="f">
				<div data-role="header" data-theme="f">
					<h1>电流采集器<span id="operspan"></span></h1>
				</div>
				<div data-role="content">
					<input type="hidden" id="_id" name="_id"/>
					<input type="hidden" id="opermode" name="opermode"/>
					<table>
						<tr>
							<td><label for="indicatoraddr">电流采集器地址<font style="color: red;"> * </font></label></td><td>
							<input type="text" name="indicatoraddr" id="indicatoraddr" placeholder="电流采集器地址"/>
							</td>
						</tr>
						<tr>
							<td><label for="phase">相位</label></td>
							<td>
							<select name="phase" id="phase">
								<option value="1">A 相</option>
								<option value="2">B 相</option>
								<option value="3">C 相</option>
							</select></td>
						</tr>
						<tr>
							<td><label for="location">安装位置</label></td>
							<td>
							<input type="text" id="location" placeholder="安装位置"/>
							</td>
						</tr>
						<tr>
							<td colspan="2"><span class="tipcontentspan"></span></td>
						</tr>
						<tr>
							<td colspan="2">
							<div class="btn-float-left">
								<a href="#" data-role="button" id="indicatoreditbtn" data-inline="true" data-theme="f"></a>
								<a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="e">取消</a>
							</div></td>
						</tr>
					</table>
				</div>
			</div>

			<!-- 操作对话框 -->
			<div data-role="popup" id="popupmenu">
				<div data-role="controlgroup" id="menugroup" data-type="horizontal" data-transition="pop" data-theme="f">
					<a href="#" data-role="button" data-icon="plus" id="addbtn" data-theme="f">添加</a>
					<a href="#" data-role="button" data-icon="edit" id="modifybtn" data-theme="f">修改</a>
					<a href="#" data-role="button" data-icon="minus" id="removebtn" data-theme="f">删除</a>
				</div>
			</div>

			<!-- 删除确认对话框 -->
			<a href="#removeconfirmpopup" id="triggerremoveconfirmpopup" data-rel="popup" data-transition="flip" data-position-to="window" data-role="button" style="display: none;"></a>
			<div data-role="popup" id="removeconfirmpopup" data-dismissible="false" data-overlay-theme="f">
				<div data-role="header" data-theme="f">
					<h1>删除确认</h1>
				</div>
				<div data-role="content">
					<input type="hidden" id="_id" name="_id"/>
					<h4>是否删除电流采集器</h4>
					<p>
						注意, 删除操作不可回退。
					</p>
					<div class="btn-float-left">
						<a href="#" data-role="button" id="removeyesbtn" data-inline="true" data-theme="e">是</a>
						<a href="#" data-role="button" data-inline="true" data-theme="f" data-rel="back">否</a>
					</div>
				</div>
			</div>

			<div data-role="header" id="curveheader" data-theme="f">
				<h1> 电流曲线 </h1>
				<!--左边panel-->
				<a href="#showarchive" data-rel="panel" data-role="button" data-icon="grid" data-iconpos="notext"></a>
				<div id="showarchive" data-role="panel" data-display="overlay" data-position="left" style="min-height: 50%;">
					<div data-role="header" data-theme="f">
						<h3>台账  &amp; 数据</h3>
					</div>
					<div data-role="content" id="archivecontent">
						<div data-role="collapsible" data-theme="f" data-content-theme="f" data-collapsed="false">
							<h3 class="custom-igroup">电流采集器</h3>
							<ul id="indicatorlist" data-role="listview" data-inset="true" data-theme="c"></ul>
						</div>

						<div data-role="collapsible" data-theme="f" data-content-theme="f" data-collapsed="false" style="margin-top: 30px;">
							<h3>电流数据</h3>
							<label for="begindate">起始日期</label>
							<input type="text" id="begindate" name="begindate" placeholder="起始日期" readonly="readonly" />
							<label for="enddate">结束日期</label>
							<input type="text" id="enddate" name="enddate" placeholder="结束日期" readonly="readonly" />
							<button data-role="button" data-icon="export" id="exportbtn" data-inline="true" data-theme="e" value="导出"></button>
							&nbsp;<button data-role="button" data-icon="info" id="analysisbtn" data-inline="true" data-theme="e" value="曲线分析"></button>
						</div>
					</div>
				</div>
				<!--右边panel-->
				<a href="#showimplinfo" data-rel="panel" data-role="button" data-icon="info" data-iconpos="notext"></a>
				<div id="showimplinfo" data-role="panel" data-display="overlay" data-position="right" style="min-height: 50%; z-index: 10; background-color: #ffffff;">
					<div data-role="header" data-theme="f">
						<h3>日志信息</h3>
					</div>
					<div data-role="content" id="implinfocontent" style="padding: 10px 0;">
						<div id="logtabcontent" class="tab-content">
							<div id="wrapper" style="top: 45px; left: 4px; right: 4px;">
								<div>
									<div class="log-div"></div>
									<!-- 下拉区域 -->
									<div id="pullup">
										<span class="pullup-icon"></span><span class="pullup-label">上拉加载更多...</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!--页面content内容编辑 -->
			<input type="hidden" id="iaddr" name="iaddr"/>
			<input type="hidden" id="indicatorid" name="indicatorid"/>
			<div data-role="content" id="curvecontent" data-theme="f"
			style="padding: 0px; border-bottom: 0px;">
				<div id="maindiv" style="display: none;">
					<div id="tipdiv">
						<div class="close" id="tipclosediv"></div>
						提示: 电流采集器存储最近三天的线路电流数据, 请确认其挂载时间后采集...
					</div>
					<span style="color: red"><img src="../../image/tip.PNG" />&nbsp;线路电流采集</span>
					<div class="table-margin-20">
						<table id="acqformtable" style="width: 100%;">
							<tr>
								<td width="15%"><label for="staddr">电流采集器地址</label></td><td width="34%">
								<input type="text" name="staddr" id="staddr" placeholder="电流采集器地址" readonly="readonly"/>
								</td><td width="15%"><label for="stphase">相位</label></td><td width="34%">
								<input type="text" name="stphase" id="stphase" placeholder="相位" readonly="readonly"/>
								</td>
							</tr>
							<tr>
								<td><label for="stlocation">安装位置</label></td><td>
								<input type="text" name="stlocation" id="stlocation" placeholder="安装位置" readonly="readonly"/>
								</td>
								<td colspan="2"><button id="flipbtn" data-role="button" data-inline="true" data-theme="e" value="翻牌闪灯"></button>&nbsp;<button id="acqdatabtn" data-role="button" data-inline="true" data-theme="e" value="数据采集"></button></td></td>
							</tr>
						</table>
						<div id="CURVE_CONTAINER"></div>
						<div id="loadingdiv" style="display: none; width: 100%; margin: 0 auto; text-align: center; margin-top: 80px;">
							<img src="../../image/loading14.gif"/>
						</div>
					</div>
				</div>

				<div id="curvediv" style="display: none;">
					<span style="color: red"><img src="../../image/tip.PNG" />&nbsp;曲线分析 </span>
					<div class="table-margin-20">
						<table id="analysisformtable" style="width: 100%;">
							<tr>
								<td><label for="fbegindate">起始日期</label></td><td>
								<input type="text" id="fbegindate" name="fbegindate" placeholder="起始日期" readonly="readonly" />
								</td>
								<td><label for="fenddate">结束日期</label></td><td>
								<input type="text" id="fenddate" name="fenddate" placeholder="结束日期" readonly="readonly" />
								</td>
								<td><button id="fanalysisbtn" data-role="button" data-inline="true" data-theme="e" value="曲线分析"></button></td>
							</tr>
						</table>
						<div id="F_CURVE_CONTAINER"></div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>